<template>
	<div class="view">
		 <Modal 
        		v-model="data.isShow">
        		<p slot="header">
	            <span>实体标签编辑</span>
	        </p>
			<Form ref="form" 
				:model="data.data" 
				:rules="ruleValidate" 
				:label-width="80">
				
		        <Form-item label="组名" style="width: 300px;">
		            <Input 
		            		type="text" 
		            		v-model="data.data.groupName" 
		            		size="large"
		            		autofocus
		            		ref="gname">
		            </Input>
		        </Form-item>
		        
		        <Form-item 
		        		:label="'属性 '+ (index + 1)" 
		        		v-for="(etName, index) in data.data.etNames"
		        		:prop="'etNames.' + index"
		        		:key="index"
		        		:rules="{required: true, message: '属性' + (index + 1) +'不能为空', trigger: 'blur'}">
		        		<Row>
		                <Col span="18">
		                    <Input 
		                    		type="text" 
		                    		v-model="data.data.etNames[index]" 
		                    		size="large"
		                    		@on-enter="addEtag">
		                    </Input>
		                </Col>
		                <Col span="4" offset="1" v-if="index != 0">
		                    <Button type="ghost" @click="removeEtag(index)">删除</Button>
		                </Col>
		            </Row>
		        </Form-item>
		        
		         <Form-item>
		            <Row>
		                <Col span="12">
		                    <Button type="dashed" 
		                    		long 
		                    		@click="addEtag" 
		                    		icon="plus-round">
		                   	 	新增职位属性
		                   	</Button>
		                </Col>
		            </Row>
		        </Form-item>
		        
		        <Form-item label="是否公司" v-if="data.data.type == 1">
		            <i-switch v-model="data.data.isCompany"></i-switch>
		        </Form-item>
		        
		    </Form>
		    
		    <div slot="footer">
	           	<Button 
	           		type="primary" 
	           		:loading="data.isSubmit" 
	           		style="margin-right: 8px"
	           		@click="handleSubmit('form')">
	           		更新
	           	</Button>
	           		
	            <Button 
	            		type="ghost" 
	            		:disabled="data.isSubmit" 
	            		@click="handleCancel('form')">
	            		关闭
	            </Button>
	        </div>
	     </Modal>
	</div>

</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {
				ruleValidate: {
                }
			}
		},
		mounted() {
		},
		methods: {
			focusName() {
				this.$refs['gname'].focus();	
			},
			addEtag: function() {
				var data = this.data.data;
				var len = data.etNames.length;
				if(data.etNames[len-1].length > 0) {
					data.etNames.push('');
				}
			},
			removeEtag : function(index) {
				var data = this.data.data;
				data.etNames.splice(index, 1);
			},
			handleSubmit (name) {
				var $this = this;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                    		$this.data.isSubmit = true;
                    		this.$emit('on-submit', $this.data);
                    } else {
                        $this.$Message.error('表单验证失败!');
                    }
                });
            },
            handleCancel (name) {
              	this.data.isShow = false;
            }
		}
	}
</script>

<style scoped="scoped">
	.view {
		padding: 20px;
	}
</style>